<template>
  <div class="v1" ref="xbox">
    <div class="v2">
      <img src="@/assets/images/cinemaInfo/banner.png" class="banner" alt />
      <van-nav-bar
        :title="`${infos.title}`"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
      ></van-nav-bar>
      <img src="@/assets/images/cinemaInfo/start.png" alt class="start" />
      <div  class="apple">
        <div class="content" ref="content">
            <div class="content-small">

 <!-- 位置 -->
          <div class="box" @click="cinemaAddress">
            <img src="@/assets/images/cinema/gps.png" alt class="gps" />
            <p class="title">{{infos.title}}</p>
            <p class="address">{{infos.address}}</p>
            <img src="@/assets/images/cinemaInfo/tip.png" alt class="tip" />
          </div>
          <!-- 轮播 -->
          <swiper ref="mySwiper" :options="swiperOptions" class="photo">
            <swiper-slide class="photo-content">
              <img src="@/assets/images/cinemaInfo/us.png" alt />
              <p>
                9.
                <span>5</span>
              </p>
              <div class="good">
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
              </div>
            </swiper-slide>
            <swiper-slide>
              <img src="@/assets/images/cinemaInfo/mxp.png" alt />
              <p>
                9.
                <span>5</span>
              </p>
              <div class="good">
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
              </div>
            </swiper-slide>
            <swiper-slide>
              <img src="@/assets/images/cinemaInfo/zoulu.png" alt />
              <p>
                9.
                <span>5</span>
              </p>
              <div class="good">
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
              </div>
            </swiper-slide>
            <swiper-slide>
              <img src="@/assets/images/cinemaInfo/dajiejie.png" alt />
              <p>
                9.
                <span>5</span>
              </p>
              <div class="good">
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
              </div>
            </swiper-slide>
            <swiper-slide>
              <img src="@/assets/images/cinemaInfo/aoman.png" alt />
              <p>
                9.
                <span>5</span>
              </p>
              <div class="good">
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
                <img src="@/assets/images/cinemaInfo/startall.png" alt />
              </div>
            </swiper-slide>
          </swiper>
          <!-- 电影 -->
          <div class="movie">
            <p class="movie-name">后来的我们</p>
            <p class="movie-time">119分钟 | 剧情 | 周冬雨</p>
          </div>
          <!-- 2.1 -->
          <div class="today">
            <p>今天2月1日</p>
          </div>
          <!-- 场次 -->
          <ul class="ul">
            <li v-for="item in list" :key="item.id" class="list">
              <div class="one">
                <span class="time">{{item.time}}</span>
                <span class="leave">{{item.leave}}</span>
              </div>
              <div class="two">
                <span class="type">{{item.type}}</span>
                <span class="room">{{item.room}}</span>
              </div>

              <span class="price">{{item.price}}</span>
              <van-tag class="buy" @click="buy">
                <span>{{item.buy}}</span>
              </van-tag>
            </li>
          </ul>
            </div>
         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      id: "",
      swiperOptions: {
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        // loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  computed: {
    ...mapState({
      //自己取个名 infos
      infos: function(state) {
        return state.arr.find(ele => ele.id == this.$route.params.id);
      }
    }),
    ...mapState(["list"])
  },
  created() {
    //   this.$route.params.id;
  },
  mounted() {
    let wrapper = this.$refs.content;
    let scroll = new BScroll(wrapper,{
        click:true
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    cinemaAddress() {
      this.$router.push({
        name: "cinemaAddress"
      });
    },
    buy() {
      this.$router.push({
        name: "cinemaSeat"
      });
    }
  }
};
</script>

<style lang="scss">
// body {
//   //   background: #eee;
//   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
//   font-size: 14px;
//   color: #000;
//   margin: 0;
//   padding: 0;
// }

// body,html{
//     position: relative;
// }
.van-nav-bar__title {
  color: #ffffff;
}
.van-nav-bar__left{
  color: #FFFFFF;
}
.van-nav-bar .van-icon {
  color: #dfdfdf;
}
.van-nav-bar .van-nav-bar__title {
  background: transparent !important;
}
</style>
<style scoped lang="scss">
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  //   background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}

.cinema-title{
  color: #FFF!important;
  
}
.van-nav-bar {
  background: transparent!important;
}
.van-nav-bar__title {
  color: #ffffff;
}
.banner {
  width: 100%;
  //   background: url(~@/assets/images/cinemaInfo/banner.png) no-repeat center;
  //   transform: rotate(90deg);
  z-index: 52;
}
.van-hairline--bottom::after {
  border: 0;
}
.start {
  width: 20px;
  height: 18px;
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 5;
}
.box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  z-index: 66;
  //   position: absolute;
//   transform: translateY(-285px);
  .gps {
    width: 22px;
    margin-top: 10px;
    // height: 22px;
  }
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-left: 15px;
  }
  .address {
    font-size: 12px;
    font-weight: 400;
    color: #dfdfdf;
    margin-left: 36px;
    margin-top: -12px;
  }
  .tip {
    width: 20px;
    //   height: 13px;
    transform: translate(50px, -32px) rotate(180deg);
  }
}
.photo {
    overflow: hidden;
  transform: translateY(-240px);
  position: relative;
  z-index: 0;
  margin-top: 235px;
  height: 200px;
  img {
    width: 140px;
    height: 188px;
  }
  p {
    font-size: 16px;
    display: inline-block;
    color: #dfdfdf;
    position: absolute;
    bottom: 15px;
    right: -10px;
  }
  span {
    font-size: 14px;
    color: #dfdfdf;
  }
}
.movie {
  transform: translateY(-240px);
  .movie-name {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
  }
  .movie-time {
    font-size: 14px;
    font-weight: 400;
    color: #9A9B9E;
    margin: 0;
    margin-top: 4px;
  }
}
.today {
  font-size: 12px;
  font-weight: 400;
  color: #fbc34a;
  transform: translateY(-210px);
  width: 90%;
  text-align: left;
  margin: 0 auto;
}
ul{
    transform: translateY(-200px);
}
.list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 335px;
  height: 91px;
  background-color: #33363d;
  border-radius: 6px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.one {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 55px;

  .time {
    color: #ffffff;
    font-size: 18px;
    padding-left: 8px;
  }
  .leave {
    font-size: 12px;
    color: #9A9B9E;
     margin-top: 5px;
  }
}
.two {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  text-align: left;
  width: 68px;
  margin-top: 12px;
  .type {
    color: #ffffff;
    font-size: 12px;
  }
  .room {
    font-size: 12px;
    color: #9A9B9E;
    margin-top: 5px;
  }
}
.price {
  font-size: 18px;
  color: #fbc34a;
}
.buy {
  padding: 4px 8px;
  background: linear-gradient(
    150deg,
    rgba(242, 91, 134, 1) 0%,
    rgba(241, 172, 94, 1) 100%
  );
  box-shadow: 0px 0px 4px 1px rgba(242, 109, 125, 0.18);
  border-radius: 6px;
}

.good {
  position: absolute;
  left: -25px;
  top: 168px;
  width: 100%;

  img {
    margin-right: 3px;
    width: 10px;
    height: 9px;
  }
}
// 回弹
// .apple{
//     height: 1000px;
//     .conten{
//         height: 1000px;
//         padding-bottom: 500px;
//     }
// }
.v1{
    height:100%;
}
.v2{
    height:100%;
//  padding-bottom: 200px;

}
.apple{
    height:100%;
    transform: translateY(-270px);
}
.content{
    height:667px;
}
.content-small{
    height:800px;
    
}
</style>
